<template>
  <!-- 分页组件 -->
  <el-pagination
    align="center"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="PaginationInfo.page"
    :page-sizes="[1, 5, 10, 40]"
    :page-size="PaginationInfo.limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="PaginationInfo.total"
  >
  </el-pagination>
</template>

<script>
// 需要父组件传过来当前页currentPage和分页大小pageSize  总页数
export default {
  name: "pagination",
  props: {
    PaginationInfo: {
      type: Object,
      required: true,
    },
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.$emit("skipPage", "limit", val);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.$emit("skipPage", "page", val);
    },
  },
};
</script>

<style>
</style>